<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <input type="file" accept="image/*" multiple />
    <button>上传图片</button>
    <img src="" alt="" />
    <script>
      const btn = document.querySelector("button");
      const ipt = document.querySelector("input");
      const img = document.querySelector("img");
      btn.addEventListener("click", async function (e) {
        console.log(ipt.files);
        const data = new FormData();
        data.append("file", ipt.files[0]);
        try {
          const res = await axios({
            method: "post",
            url: "http://localhost:3000/uploadFiles",
            data,
            headers: {
              "Content-Type": "multipart/form-data",
            },
          });
          console.log(res);
          img.src = res.data.file.path;
        } catch (error) {
          console.log(error);
        }
      });
    </script>
  </body>
</html>
